<template>
  <view class="recommend">
    <view class="box-top">
      <view class="common-tab">
        <view class="common-tab-text" :class="{active:item.id == dateType}" @click="changeDate(item.id)"  v-for="item in tabList" :key='item.id'>{{item.tabName}}</view>
      </view>
    </view>
    <view class="box-list">
      <scroll-view scroll-y="true">
        <view class="clientItem" v-for="item in recommendList" :key='item.userId'>
          <view class="clientItem-l">
            <view class="clientItem-l-l">
              <view class="clientItem-l-l-img">
                <image style="width: 100rpx; height: 100rpx; border-radius: 50%;overflow:hidden;" :src="item.href" mode=""></image>
              </view>
              <view class="imgModel">{{item.rankName}}</view>
            </view>
            <view class="clientItem-l-r">
              <view class="clientItem-l-r-t">
                <text class="name">{{item.realName}}</text>
              </view>
              <view class="clientItem-l-r-b">
                {{item.linkmanPhone}}
              </view>
            </view>
          </view>
          <view class="clientItem-r">
            <view class="clientItem-r-txt">
              <text class="team">{{item.statusName || '未加盟'}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="vacancy" v-if="recommendList && recommendList.length == 0">
        <view class="loadingImg">
          <image style="width: 340rpx; height: 340rpx;" :src="image" mode=""></image>
        </view>
        暂无数据
      </view>
      <view class="good-footer-ml">
        <button type="primary" class="sub-btn cur" plain="true" @click="inviteFriend">邀请好友</button>
      </view>
    </view>
  </view>
</template>

<script>
import { directFriendData } from '@/service/home/home.service.js'
export default {
  data () {
    return {
      dateType: 0, // 时间段 0>今日 1>本周 2>本月
      tabList: [
        {id:0,tabName:'今日'},
        {id:1,tabName:'本周'},
        {id:2,tabName:'本月'},
        {id:3,tabName:'总人数'}
      ],
      recommendList: [],
      image: this.$store.state.imgBaseUrl + '/notShop.png',
      pageInfo: {
        size:10,
        current:1,
        total:0
      }
    }
  },
  onLoad (option) {
    this.dateType = option.id;
    this.directFriend(this.dateType);
  },
  onShow () {},
  onReachBottom () {
    // 页面滚动到底部的事件
    if (this.pageInfo.current == 1) {
      return false;
    } else if (this.pageInfo.total > this.recommendList.length) {
      this.directFriend(this.dateType);
    }else if (this.pageInfo.current != 1) {
      uni.showToast({
        title: '已经到底了',
        icon: 'none'
      })
    }
  },
  methods: {
    directFriend (type) {
      uni.showLoading();
      let params = {
        id: type,
        size: this.pageInfo.size,
        current: this.pageInfo.current
      }
      directFriendData(params,res => {
        if (res.status == 0) {
          if (this.pageInfo.current == 1) {
            this.recommendList = res.data.records;
          } else {
            this.recommendList = this.recommendList.concat(res.data.records);
          }
          this.pageInfo.total = res.data.total;
          if (this.pageInfo.total > this.recommendList.length) {
            this.pageInfo.current ++;
          }
        }
        uni.hideLoading();
      });
    },
    changeDate (t) {
      // 切换时间段
      this.dateType = t;
      this.pageInfo.current = 1;
      this.directFriend(t);
    },
    inviteFriend () {
      uni.navigateTo({
        url: '/pages/invite/invite'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .recommend {
    min-height: calc(100vh - 50px);
    background-color: #FFFFFF;
    .box-top {
      margin: auto;
      box-shadow:2px 5px 10px 0px rgba(225,225,225,0.72);
      padding: 34rpx 100rpx 40rpx 100rpx;
      .common-tab {
        display: flex;
        justify-content: space-around;
        font-size: 28rpx;
      }
    }
    .box-list {
      margin-top: 43rpx;
      padding: 0 35rpx 100rpx 35rpx;
      scroll-view {
        // max-height: calc(100vh - 140px);
      }
      .clientItem {
        background:rgba(247,247,247,1);
        border-radius:13rpx;
        margin-top: 20rpx;    
        padding: 0 40rpx 0 22rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .clientItem-l {
          .clientItem-l-l {
            position: relative;
            vertical-align: top;
            display: inline-block;
            .clientItem-l-l-img {
              width: 100rpx;
              height: 100rpx;
            }
          }
          .imgModel {
            height: 25px;
            position: absolute;
            width: 50px;
            bottom: -1px;
            background:rgba(98,98,98,0.8);
            border-radius: 0 0 50px 50px;
            font-size: 22rpx;
            text-align: center;
            color:rgba(255,255,255,1);
          }
          .clientItem-l-r {
            display: inline-block;
            margin-left: 20rpx;
            vertical-align: middle;
            .clientItem-l-r-t {
              .name {
                color: #434343;
                font-size: 28rpx;
              }
            }
            .clientItem-l-r-b {
              font-size:22rpx;
              color:#434343;
              margin-top: 15rpx;
            }
          }
        }
        .clientItem-r {
          line-height: 128rpx;
          font-size: 24rpx;
          color: #434343;
          .team {
            margin-left: 12rpx;
            color:rgba(255,161,115,1);
            vertical-align: middle;
          }
        }
      }
    }
    .vacancy {
      margin-top: 30rpx;
      text-align: center;
      font-size: 24rpx;
      color: #999;
      .loadingImg {
        padding-top: 200rpx;
      }
    }
		.good-footer-ml {
			position: fixed;
		}
  }
</style>
